<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Order' }">所有订单</el-breadcrumb-item>
      <el-breadcrumb-item :disabled="true">订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="" shadow="hover">
      <div >
        <el-card class="orderBox">
          <div slot="header" class="clearfix headerTop">
            <span>订单详情</span>
          </div>
          <div>
            <div v-for="(item, index) in goodsArray" :key="index" class="order-item">
              <div class="goodsItem">
                <div class="goodsImage"><img :src="item.goodInfo.goodsImage" alt=""></div>
                <div class="goodsInfo">
                  <div class="goodsName item">商品名称：{{item.goodInfo.goodsName}}</div>
                  <div class="goodsPrice item">单价：<span style="color:#43bbf1; font-size: 25px">{{item.goodInfo.goodsPrice}}</span>  时间币</div>
                  <div class="goodsNum item">购买数量：{{item.goodsNum}}</div>
                </div>
              </div>
            </div>
            <div class="orderInfo">
              <div class="item">订单编号：{{ orderItem.orderNum }}</div>
              <div class="item">创建时间：{{ orderItem.createTime }}</div>
              <div class="item">商品总价：<span style="color:#06a8f1; font-size: 25px">{{ orderItem.totalPrice }}</span> 时间币</div>
              <div class="item">支付状态：<span :class="orderItem.payType == '0' ? 'red' : ''">{{ formatPayType(orderItem.payType) }}</span></div>
            </div>
          </div>
        </el-card>
        <el-card class="addressBox">
          <div slot="header" class="clearfix">
            <span>地址详情</span>
            <el-button style="float: right; padding: 5px" type="primary" @click="ToShip()">去发货</el-button>
          </div>
          <div class="address">
            <div class="item">收获人员：{{ address.name }}</div>
            <div class="item">联系方式：{{ address.phone }}</div>
            <div class="item">收获地址：{{ address.receivingAddress }}</div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script>
import {queryOrderItemMany, queryDetail, queryAddressById, updateOrder} from '../../../api/index'

export default {
  props: [],
  watch: {},
  data() {
    return {
      name: "",
      orderNum: '',
      orderId: '',
      addressId:'',
      goodsArray: [],//订单下的商品
      orderItem: {},
      address:{}
    }
  },
  created() {
  },
  mounted() {
    // 获取订单号参数
    this.orderNum = this.$route.params.orderNum;
    this.orderId = this.$route.params.orderId
    this.addressId = this.$route.params.addressId
    // 使用订单号执行其他逻辑
    console.log("订单号:", this.orderNum);
    this.getOrder()
  },
  methods: {
    getOrder() {
      queryDetail(this.orderId).then(res => {
        this.orderItem = res.data
      })
      queryOrderItemMany(this.orderNum).then(res => {
        this.goodsArray = res.data
      })
      queryAddressById(this.addressId).then(res=>{
        console.log(res)
        this.address = res.data[0]
      })
    },
    ToShip() {
      if(this.orderItem.orderType == '5'){
        this.$message.error("请勿重复发货")
        return
      }
      if(this.orderItem.payType == '0'){
        this.$message.error("用户还未完成支付")
        return
      }
      const data = {
        id: this.orderId,
        orderType: '5'
      }
      updateOrder(data).then(res => {
        this.$message.success("发货成功")
        queryDetail(this.orderId).then(res => {
          this.orderItem = res.data
        })
      })
    },
    formatPayType(cellValue){
      if (cellValue === '0') {
        return `未支付`;
      } else if (cellValue === '1') {
        return '已支付';
      } else {
        return '';
      }
    },
    goBack(){
      this.$router.go(-1);
    }
  },
  components: {},
  beforeDestroy() {
  }
}
</script>

<style scoped>
.el-breadcrumb{
  padding: 10px;
}
.orderBox {
  width: 55%;

}

.addressBox {
  margin-top: 30px;
  width: 55%;
}

.goodsItem {
  width: 50%;
  display: flex;
  padding: 10px;
  .goodsImage {
    img {
      width: 100px;
      height: 100px;
    }
    margin-right: 20px;
    border: 1px solid #6e6d6d;
  }
  .goodsInfo{
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item{
      padding: 5px 0;
    }

  }
}
.orderInfo{
  padding: 10px;
  font-size: 18px;
  .item{
    padding: 5px 0;
  }
  .red{
    color: #ef6a6a;
  }
}
.addressBox{
  .address{
    .item{
      padding: 5px 0;
    }

  }
}
</style>